<?php
    $home_nav = ' class="current"';
    $profile_nav = '';
    $project_nav = '';
    $product_nav = '';
    $contact_nav = '';
    include('header.php');
?>
    <script>
        $(document).ready(function(){
            //$("#main_bg").height(695);
            //$("#main_bg").css('overflowY','hidden');
            //$("#main_bg").css('display','block');
            
            if($(window).height()<676){
		$("#main_bg").height(676);
		$("#main_bg").css('overflowY','hidden');
		$("#main_bg").css('display','block');
	    }else{
		$("#main_bg").height($(window).height());
		$("#main_bg").css('overflowY','hidden');
		$("#main_bg").css('display','block');
		$("#footer").css('position','absolute');
		$("#footer").css('bottom','0');
	    }
        });
    </script>
    <div id="home_l">
        <img src="images/home_building_a_active.jpg" id="home_l_img"/>
    </div>
    <div id="home_r">
        <div id="home_r_thumb">
            <img src="images/home_building_a_thumb_active.jpg" alt="<?php _l('home-build-a-title'); ?>" id="building_a" class="building_ building_active" />
            <img src="images/home_building_b_thumb.jpg" alt="<?php _l('home-build-b-title'); ?>" id="building_b" class="building_" />
            <img src="images/home_building_c_thumb.jpg" alt="<?php _l('home-build-c-title'); ?>" id="building_c" class="building_" />
        </div>
        <div class="home_r_detail building_a">
            <h3><?php _l('home-build-a-title'); ?></h3>
            <p>
                <?php _l('home-build-a-detail'); ?>
            </p>
        </div>
        <div class="home_r_detail building_b display_none">
            <h3><?php _l('home-build-b-title'); ?></h3>
            <p>
                <?php _l('home-build-b-detail'); ?>
            </p>
        </div>
        <div class="home_r_detail building_c display_none">
            <h3><?php _l('home-build-c-title'); ?></h3>
            <p>
                <?php _l('home-build-c-detail'); ?>
            </p>
        </div>
    </div>
    <div class="clear">&nbsp;</div>
    
    <div id="about_us" class="content_box png_bg">
        <!--<a href="profile.php" title="<?php _l('site-title'); ?>">-->
            <h2><?php _l('home-aboutus-title'); ?></h2>
            <p>
               <?php _l('home-aboutus-detail'); ?>
            </p>
        <!--</a>-->
    </div>
    <script>
        $(document).ready(function(){
           $('.building_').mouseover(function(){
                var overImg = 'images/home_' + $(this).attr('id') + '_thumb_active.jpg';
                $(this).attr('src',overImg);
           }).mouseout(function(){
                if(!($(this).hasClass('building_active')))
                {
                    var overImg = 'images/home_' + $(this).attr('id') + '_thumb.jpg';
                    $(this).attr('src',overImg);
                }
           }).click(function(){
                if(!($(this).hasClass('building_active')))
                {
                    $('.building_').removeClass('building_active');
                    $('#building_a').attr('src','images/home_building_a_thumb.jpg');
                    $('#building_b').attr('src','images/home_building_b_thumb.jpg');
                    $('#building_c').attr('src','images/home_building_c_thumb.jpg');
                    
                    $('#home_l_img').attr('src','images/home_' + $(this).attr('id') + '_active.jpg');
                    
                    var overImg = 'images/home_' + $(this).attr('id') + '_thumb_active.jpg';
                    $(this).attr('src',overImg);
                    $(this).addClass('building_active');
                    
                    $('.home_r_detail').slideUp();
                    $('.'+$(this).attr('id')).slideDown();
                }
           });
        });
    </script>
<?php
    include('footer.php');
?>